<template>
  <a-modal
    :visible="visible"
    title="新增收款账户"
    :width="852"
    :footer="false"
    :maskClosable="false"
    @cancel="closeModal"
  >
    <div v-if="ApprovedOrNot">
      <div class="example">
        <a-spin size="large" style="margin-right: 10px" /> 您的申请正在审核中...
      </div>
    </div>
    <div v-else>
      <div class="screenes">
        <!--      @click="tabetype(1)"-->
        <div class="IDCardType" :class="tabetypes >= 1 ? 'Selected' : ''">
          选择身份证类型
        </div>
        <div class="BasicInformation" :class="tabetypes >= 2 ? 'Selected' : ''">
          提交基本资料
        </div>
        <div class="AccountNumber" :class="tabetypes == 3 ? 'Selected' : ''">
          设置收款账号
        </div>
      </div>
      <div class="ContentText">
        <div class="accountTitle">
          <p v-if="tabetypes == 1" class="title">选择账户类型</p>
          <p v-if="tabetypes == 2" class="title">主体信息</p>
          <p v-if="tabetypes == 3" class="title">设置收款账号</p>
          <div v-if="tabetypes == 1" class="butright">
            <div class="butthree">
              <span
                @click="butright(1)"
                class="naturalPerson"
                :class="modelRef.comproperty == 1 ? 'clqhuan' : ''"
                >自然人</span
              >
              <span
                @click="butright(2)"
                class="individuality"
                :class="modelRef.comproperty == 2 ? 'clqhuan' : ''"
                >个体工商户</span
              >
              <span
                @click="butright(3)"
                class="enterprise"
                :class="modelRef.comproperty == 3 ? 'clqhuan' : ''"
                >企业工商户</span
              >
            </div>
          </div>
        </div>
        <div v-if="tabetypes == 1">
          <p class="contentestxt">请准备以下资料</p>
          <div class="contentes">
            <div v-if="modelRef.comproperty == 1" class="text">
              <p>1、负责人身份证正反面照（需原件拍照或者加盖公章的复印件）</p>
              <p>2、负责人手持身份证照片</p>
              <p>
                3、负责人银行信息（银行卡号、开户银行支行地址、银行开户名、银行预留手机号和银行卡照）
              </p>
              <p>4、店面门头照</p>
              <p>5、店铺内景照</p>
              <p>6、与租客的房屋租赁合同（公司需红盖章或签约人红色手印）</p>
              <p>
                7、营业执照（经营主体是公司，必传；经营主体是自然人，可以不传）
              </p>
            </div>
            <div v-if="modelRef.comproperty == 2" class="text">
              <p>1、经营者身份证正反面照（需原件拍照或者加盖公章的复印件）</p>
              <p>
                2、企业对公银行账户信息（企业账户、开户银行支行地址、银行开户名、联行号、银行预留手机号）
              </p>
              <p>3、店面门头照</p>
              <p>4、店铺内景照</p>
              <p>5、营业执照</p>
              <p>6、开户许可证照片</p>
            </div>
            <div v-if="modelRef.comproperty == 3" class="text">
              <p>1、法人代表身份证正反面照（需原件拍照或者加盖公章的复印件）</p>
              <p>
                2、企业对公银行账户信息（企业账户、开户银行支行地址、银行开户名、联行号、银行预留手机号）
              </p>
              <p>3、店面门头照</p>
              <p>4、店铺内景照</p>
              <p>5、营业执照</p>
              <p>6、开户许可证照片</p>
            </div>
          </div>
          <div class="footer">
            <span @click="closeModal" class="Back mr-20">取消</span>
            <span @click="tabetype(2)" class="nextStep">确定</span>
          </div>
        </div>
        <div v-if="tabetypes == 2">
          <div>
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-form-item label="商户简称" v-bind="validateInfos.shortname">
                <div>
                  <a-input
                    v-model:value="modelRef.shortname"
                    placeholder="租客支付时展示的收款方名称,10个字符内"
                  />
                </div>
              </a-form-item>
              <a-form-item label="行业类型" v-bind="validateInfos.industry">
                <div>
                  <a-select
                    ref="select"
                    v-model:value="modelRef.industry"
                    style="width: 100%"
                    placeholder="请选择"
                    :options="IndustryList"
                  >
                  </a-select>
                </div>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty != 1"
                label="营业执照"
                v-bind="validateInfos.corpbuspic"
              >
                <div class="prompt">
                  <span v-if="modelRef.comproperty == 2">
                    支持.jpg.jpeg.png格式照片,大小不超过5M。</span
                  >
                  <span v-if="modelRef.comproperty == 3">
                    支持.jpg.jpeg.png格式照片,大小不超过5M。</span
                  >
                  <a-button
                    style="color: #05bac5"
                    @click="ViewSampleImage(4)"
                    type="link"
                    >查看示例图</a-button
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges4"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button v-if="!modelRef.corpbuspic" :loading="loadinges4">
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div v-if="modelRef.corpbuspic" class="pictureInformation">
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.corpbuspic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.corpbuspic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(4)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item >
                <template #label>
                  <span> <span style="color: red">*</span> 经营地址</span>
                </template>
                <a-row>
                  <a-col :span="24" style="margin-bottom: 10px;">
                    <a-select
                        ref="select"
                        show-search
                        v-model:value="modelRef.areaes"
                        style="width: 100%"
                        placeholder="请输入地址并选择"
                        :options="areaOptions"
                        :filter-option="filterOption1"
                    >
                    </a-select>
                  </a-col>
                  <a-col :span="24">
                    <a-input
                        v-model:value="modelRef.address"
                        placeholder="必填，详细地址（56个字符以内）"
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                label="工商注册号"
                v-if="modelRef.comproperty > 1"
                v-bind="validateInfos.creditcode"
              >
                <div>
                  <a-input
                    v-model:value="modelRef.creditcode"
                    placeholder="必须与营业执照一致，15位或18位字符"
                  />
                </div>
              </a-form-item>
              <a-form-item
                label="营业执照名称"
                v-if="modelRef.comproperty > 1"
                v-bind="validateInfos.corpbusname"
              >
                <div>
                  <a-input
                    v-model:value="modelRef.corpbusname"
                    placeholder="请输入营业执照名称"
                  />
                </div>
              </a-form-item>
              <a-form-item v-if="modelRef.comproperty > 1">
                <template #label>
                  <span> <span style="color: red">*</span> 营业执照有效期</span>
                </template>
                <a-row>
                  <a-col :span="12">
                    <a-range-picker
                        :disabled="modelRef.creditcodeexpire_longTerm"
                        v-model:value="creditcodeexpire_time"
                        @change="businesschange"
                    />
                  </a-col>
                  <a-col :span="12" style="line-height: 32px">
                    <a-checkbox
                        @change="longTermes"
                        v-model:checked="modelRef.creditcodeexpire_longTerm"
                    >长期</a-checkbox
                    >
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty > 1"
                label="注册资本"
                v-bind="validateInfos.registerfund"
              >
                <div>
                  <a-select
                    ref="select"
                    v-model:value="modelRef.registerfund"
                    style="width: 100%"
                    placeholder="请选择注册资本"
                  >
                    <a-select-option :value="1"
                      >注册资&lt;10万元</a-select-option
                    >
                    <a-select-option :value="2"
                      >10万元&lt;注册资本&lt;20万元</a-select-option
                    >
                    <a-select-option :value="3"
                      >20万元&lt;注册资本&lt;50万元</a-select-option
                    >
                    <a-select-option :value="4"
                      >50万元&lt;注册资本&lt;100万元</a-select-option
                    >
                    <a-select-option :value="5"
                      >注册资本&gt;100万元</a-select-option
                    >
                  </a-select>
                </div>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty > 1"
                label="员工人数"
                v-bind="validateInfos.stafftotal"
              >
                <div>
                  <a-select
                    ref="select"
                    v-model:value="modelRef.stafftotal"
                    style="width: 100%"
                    placeholder="请选择员工人数"
                  >
                    <a-select-option :value="1">员工数量&lt;10</a-select-option>
                    <a-select-option :value="2"
                      >10&lt;员工数量&lt;20</a-select-option
                    >
                    <a-select-option :value="3"
                      >20&lt;员工数量&lt;50</a-select-option
                    >
                    <a-select-option :value="4"
                      >50&lt;员工数量&lt;100</a-select-option
                    >
                    <a-select-option :value="5"
                      >员工数量&gt;100</a-select-option
                    >
                  </a-select>
                </div>
              </a-form-item>
              <a-form-item label="客服电话" v-bind="validateInfos.servicephone">
                <div>
                  <a-input
                    v-model:value="modelRef.servicephone"
                    placeholder="请输入客服电话"
                  />
                </div>
              </a-form-item>

              <p class="StoreInformation">联系人信息</p>
              <a-form-item
                v-if="modelRef.comproperty == 1"
                v-bind="validateInfos.legalpic"
              >
                <template #label>
                  <span>负责人手持身份证照片</span>
                </template>
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                  <a-button
                    style="color: #05bac5"
                    @click="ViewSampleImage(1)"
                    type="link"
                    >查看示例图</a-button
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges1"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button v-if="!modelRef.legalpic" :loading="loadinges1">
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div v-if="modelRef.legalpic" class="pictureInformation">
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.legalpic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.legalpic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(1)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.legalidpicfront">
                <template #label>
                  <span v-if="modelRef.comproperty == 1"
                    >负责人身份证正面照</span
                  >
                  <span v-if="modelRef.comproperty == 2"
                    >经营者身份证正面照</span
                  >
                  <span v-if="modelRef.comproperty == 3"
                    >法定代表人身份证正面照</span
                  >
                </template>
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                  <a-button
                    style="color: #05bac5"
                    @click="ViewSampleImage(2)"
                    type="link"
                    >查看示例图</a-button
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges2"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button
                      v-if="!modelRef.legalidpicfront"
                      :loading="loadinges2"
                    >
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div
                    v-if="modelRef.legalidpicfront"
                    class="pictureInformation"
                  >
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.legalidpicfront }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.legalidpicfront)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(2)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.legalidpicback">
                <template #label>
                  <span v-if="modelRef.comproperty == 1"
                    >负责人身份证反面照</span
                  >
                  <span v-if="modelRef.comproperty == 2"
                    >经营者身份证反面照</span
                  >
                  <span v-if="modelRef.comproperty == 3"
                    >法定代表人身份证反面照</span
                  >
                </template>
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                  <a-button
                    style="color: #05bac5"
                    @click="ViewSampleImage(3)"
                    type="link"
                    >查看示例图</a-button
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges3"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button
                      v-if="!modelRef.legalidpicback"
                      :loading="loadinges3"
                    >
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div
                    v-if="modelRef.legalidpicback"
                    class="pictureInformation"
                  >
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.legalidpicback }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.legalidpicback)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(3)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.legal">
                <template #label>
                  <span v-if="modelRef.comproperty == 1">负责人姓名</span>
                  <span v-if="modelRef.comproperty == 2">经营者姓名</span>
                  <span v-if="modelRef.comproperty == 3">法定代表人姓名</span>
                </template>
                <div>
                  <a-input
                    v-if="modelRef.comproperty == 2"
                    v-model:value="modelRef.legal"
                    placeholder="必须与营业执照一致"
                  />
                  <a-input
                    v-else
                    v-model:value="modelRef.legal"
                    placeholder="56个字符以内"
                  />
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.legalphone">
                <template #label>
                  <span v-if="modelRef.comproperty == 1">负责人手机号</span>
                  <span v-if="modelRef.comproperty == 2">经营者手机号</span>
                  <span v-if="modelRef.comproperty == 3">法定代表人手机号</span>
                </template>
                <div>
                  <a-input
                    v-model:value="modelRef.legalphone"
                    placeholder="11位数字的手机号码"
                  />
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.legalidno">
                <template #label>
                  <span v-if="modelRef.comproperty == 1">负责人身份证号</span>
                  <span v-if="modelRef.comproperty == 2">经营者身份证号</span>
                  <span v-if="modelRef.comproperty == 3"
                    >法定代表人身份证号</span
                  >
                </template>
                <div>
                  <a-input
                    v-model:value="modelRef.legalidno"
                    placeholder="18位身份证号,证件有效期自今日起一个月上有效"
                  />
                </div>
              </a-form-item>
              <a-form-item >
                <template #label>
                  <span style="color: red">*</span>
                  <span v-if="modelRef.comproperty == 1" >负责人身份证有效期：</span >
                  <span v-if="modelRef.comproperty == 2" >经营者身份证有效期：</span >
                  <span v-if="modelRef.comproperty == 3" >法定代表人身份证有效期：</span >
                </template>
                <a-row>
                  <a-col :span="12" >
                    <a-range-picker
                        :disabled="modelRef.longTerm"
                        v-model:value="legalidexpire_time"
                        @change="businesschanges"
                    />
                  </a-col>
                  <a-col :span="12" style="line-height: 32px">
                    <a-checkbox
                        @change="longTermes1"
                        v-model:checked="modelRef.longTerm"
                    >长期</a-checkbox
                    >
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty == 1"
                label="房屋租赁合同"
                v-bind="validateInfos.bizplacepic"
              >
                <div class="prompt">
                  <span>
                    房屋租赁合同需公司红色盖章或签约人红色手印,支持.jpg.jpeg.png格式照片,最多10张,每张照片大小不超过5M。</span
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges6"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button
                      v-if="!modelRef.bizplacepic"
                      :loading="loadinges6"
                    >
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div v-if="modelRef.bizplacepic" class="pictureInformation">
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.bizplacepic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.bizplacepic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(6)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>

              <p class="StoreInformation">门店信息</p>
              <a-form-item label="店面门头照" v-bind="validateInfos.storepic">
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges7"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button v-if="!modelRef.storepic" :loading="loadinges7">
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div v-if="modelRef.storepic" class="pictureInformation">
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.storepic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.storepic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(7)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item
                label="店面内景照"
                v-bind="validateInfos.storeinnerpic"
              >
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges8"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button
                      v-if="!modelRef.storeinnerpic"
                      :loading="loadinges8"
                    >
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div v-if="modelRef.storeinnerpic" class="pictureInformation">
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.storeinnerpic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.storeinnerpic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(8)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
            </a-form>
          </div>

          <div class="footer">
            <span @click="tabetype(1)" class="Back mr-20">上一步</span>
            <span @click="nextSteps" class="nextStep">下一步</span>
          </div>
        </div>
        <div v-if="tabetypes == 3">
          <div>
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-form-item label="账户类型">
                <div>
                  <span v-if="modelRef.accttype == 0">个人账户</span>
                  <span v-if="modelRef.accttype == 1">公司账户</span>
                </div>
              </a-form-item>
              <a-form-item label="企业法人名称">
                <div>
                  {{ modelRef.legal }}
                </div>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty <= 2"
                label="持卡人身份证号"
              >
                <div>
                  {{ modelRef.legalidno }}
                </div>
              </a-form-item>
              <a-form-item
                label="银行卡照片"
                v-if="modelRef.comproperty == 1"
                v-bind="validateInfos.openaccountpic"
              >
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                  <a-button
                    style="color: #05bac5"
                    @click="ViewSampleImage(6)"
                    type="link"
                    >查看示例图</a-button
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges5"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button
                      v-if="!modelRef.openaccountpic"
                      :loading="loadinges5"
                    >
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div
                    v-if="modelRef.openaccountpic"
                    class="pictureInformation"
                  >
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.openaccountpic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.openaccountpic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(5)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty <= 2"
                label="银行卡号"
                v-bind="validateInfos.acctid"
              >
                <div>
                  <a-input
                    v-model:value="modelRef.acctid"
                    placeholder="填写的银行卡号必须是持卡人所有，否则打款失败"
                  />
                </div>
              </a-form-item>
              <a-form-item label="结算方式" v-bind="validateInfos.clearmode">
                <div>
                  <a-select
                    disabled
                    ref="select"
                    v-model:value="modelRef.clearmode"
                    style="width: 100%"
                    placeholder="请选择"
                  >
                    <a-select-option :value="0">商户自主提现</a-select-option>
                    <a-select-option :value="1">结算到银行卡</a-select-option>
                    <a-select-option :value="2"
                      >结算到通联电子账户</a-select-option
                    >
                  </a-select>
                </div>
              </a-form-item>
              <a-form-item
                v-if="modelRef.comproperty == 3"
                label="企业账号"
                v-bind="validateInfos.acctid"
              >
                <div>
                  <a-input v-model:value="modelRef.acctid" placeholder="必填" />
                </div>
              </a-form-item>

              <a-form-item
                v-if="modelRef.comproperty >= 2"
                v-bind="validateInfos.openaccountpic"
              >
                <template #label> 开户许可证 </template>
                <template #extra>
                  <span style="color: #000;">开户许可证上必须要有银行章，或者上传一张任意一张银行电子回单的截图。</span>
                </template>
                <div class="prompt">
                  支持.jpg.jpeg.png格式照片,大小不超过5M。
                  <a-button
                    style="color: #05bac5"
                    @click="ViewSampleImage(5)"
                    type="link"
                    >查看示例图</a-button
                  >
                </div>
                <div class="Pictures">
                  <a-upload
                    v-model:file-list="fileList"
                    name="avatar"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    @change="handleChanges5"
                    accept="image/jpg,image/jpeg,image/png"
                    :before-upload="beforeUpload"
                  >
                    <a-button
                      v-if="!modelRef.openaccountpic"
                      :loading="loadinges5"
                    >
                      <UploadOutlined />
                      上传文件
                    </a-button>
                    <a-button v-else>
                      <CheckCircleFilled :style="{ color: '#05bac5' }" />
                      上传文件
                    </a-button>
                  </a-upload>
                  <div
                    v-if="modelRef.openaccountpic"
                    class="pictureInformation"
                  >
                    <div style="width: 75%" class="textEllipsis">
                      {{ modelRef.openaccountpic }}
                    </div>
                    <div style="width: 25%; padding-left: 10px">
                      <a-button
                        @click="ViewSampleImage(9, modelRef.openaccountpic)"
                        style="color: #05bac5; margin-right: 20px"
                        type="link"
                        >查看</a-button
                      >
                      <a-button
                        @click="deletes(5)"
                        style="color: #05bac5"
                        type="link"
                        >删除</a-button
                      >
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.bankcode">
                <template #label> 开户银行 </template>
                <template #extra>
                  <span style="color: #000;">如果是城市级别的商业银行，在列表找不到，就选择城市商业银行，例如“苏州银行”。</span>
                </template>
                <div>
                  <a-select
                    ref="select"
                    show-search
                    v-model:value="modelRef.bankcode"
                    style="width: 100%"
                    placeholder="请选择"
                    :options="BankList"
                    :filter-option="filterOption1"
                    @change="changesBankList"
                  >
                  </a-select>
                </div>
              </a-form-item>
              <a-form-item v-bind="validateInfos.bank_areaes">
                <template #label> 开户银行地址 </template>
                <div>
                  <a-cascader
                    style="width: 100%"
                    v-model:value="modelRef.bank_areaes"
                    :options="openAccount"
                    :load-data="loadAreaDatas"
                    placeholder="请选择所属地区"
                    change-on-select
                    @change="areaSelectChanges"
                  />
                </div>
              </a-form-item>
              <a-form-item
                label="开户行支行名称"
                v-bind="validateInfos.cnapsno"
              >
                <div>
                  <a-select
                    ref="select"
                    show-search
                    v-model:value="modelRef.cnapsno"
                    style="width: 100%"
                    placeholder="请输入支行关键词搜索后选择支行"
                    :options="options"
                    :filter-option="filterOption"
                  >
                  </a-select>
                </div>
              </a-form-item>
              <a-form-item
                label="银行预留手机号"
                v-bind="validateInfos.prephone"
              >
                <div>
                  <a-input
                    v-model:value="modelRef.prephone"
                    placeholder="必填"
                    @change="inputphone"
                  />
                </div>
              </a-form-item>
            </a-form>
          </div>

          <div class="footer">
            <span @click="tabetype(2)" class="Back mr-20">上一步</span>
            <span @click="SubmitApplication" class="nextStep">提交申请</span>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="pictureVisible"
      title="查看"
      :width="520"
      :footer="false"
      @cancel="handlecancel"
    >
      <div
        style="text-align: center; color: red; height: 32px; line-height: 32px"
      >
        照片请不要加马赛克，且上传照片中的文字清晰
      </div>
      <div style="width: 100%">
        <img style="width: 100%" :src="sampleImage" />
      </div>
      <div class="footer">
        <span @click="handlecancel" class="Back mr-20">取消</span>
        <span @click="handlecancel" class="nextStep">确定</span>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch, ref } from "vue";
import request from "../../common/utils/request";
import utils from "../../common/utils/utils";
import _ from "lodash";
import { Form, message } from "ant-design-vue";
import dayjs, { Dayjs } from "dayjs";
import {UploadOutlined, CheckCircleFilled, QuestionCircleOutlined} from "@ant-design/icons-vue";
import store from "@/store";
const useForm = Form.useForm;

export default defineComponent({
  name: "CollectionAccount",
  components: {QuestionCircleOutlined, UploadOutlined, CheckCircleFilled },
  props: {
    // 打开弹框
    visible: {
      type: Boolean,
      default: false,
    },
    // 是否有申请处于审批状态
    ApprovedOrNot: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, { emit }) {
    const state = reactive({
      tabetypes: 1,
      fileList: [],
      loadinges1: false,
      loadinges2: false,
      loadinges3: false,
      loadinges4: false,
      loadinges5: false,
      loadinges7: false,
      loadinges8: false,
      loadinges9: false,
      loadinges6: false,
      pictureVisible: false,
      sampleImage: "",
      detail: {},
      economize: [],
      market: [],
      distinguish: [],
      BankList: [],
      options: [],
      IndustryList: [],
      legalidexpire_time: [], //负责人/经营者/法定代表人  身份证开始时间
      creditcodeexpire_time: [], //营业执照时间
      areaOptions: [],
    });

    /**
     * @description: 表单字段
     */

    const modelRef = reactive({
      comproperty: "3", //类型
      shortname: "", //商户简称
      industry: 6513, //行业类型
      legal: "", //负责人/经营者/法定代表人  姓名
      legalphone: "", //负责人/经营者/法定代表人  手机号
      legalidno: "", //负责人/经营者/法定代表人  身份证号
      legalidexpire_start: "", //负责人/经营者/法定代表人  身份证开始时间
      legalidexpire: "", //负责人/经营者/法定代表人  身份证结束时间
      longTerm: false, //负责人/经营者/法定代表人  身份证长期
      legalidexpire_long: 0,
      legalpic: "", //负责人/经营者/法定代表人  手持身份证照片
      legalidpicfront: "", //负责人/经营者/法定代表人  正面身份证照片
      legalidpicback: "", //负责人/经营者/法定代表人  反面身份证照片
      corpbuspic: "", //负责人/经营者/法定代表人  营业执照照片
      areaes: undefined, // 商户地址
      address: "", //详细地址
      storepic: "", //门头照
      storeinnerpic: "", //内景照
      creditcode: "", //工商注册号
      servicephone: "",
      stafftotal: undefined,
      registerfund: undefined,
      corpbusname: "", //营业执照名称
      creditcodeexpire_start: "", //营业执照有效期
      creditcodeexpire: "", //营业执照有效期
      creditcodeexpire_longTerm: false, //营业执照有效期
      creditcodeexpire_long: 0,
      bizplacepic: "",

      accttype: 1, //账户类型
      acctid: "", //账户号
      clearmode: 1, //账户号
      openaccountpic: "", //开户许可证,银行卡照片
      bankcode: undefined, //开户銀行
      bank_areaes: [], // 银行地址
      bank_province: "",
      bank_city: "",
      cnapsno: undefined, //开户支行名称
      prephone: "", //银行预留手机号
    });

    /**
     * @description: 验证规则
     */
    const requiredRule = [{ required: true, message: "必填项" }];
    const rulesRef = reactive({
      shortname: requiredRule,
      industry: requiredRule,
      legal: requiredRule,
      legalphone: [
        {
          required: true,
          validator: (rules, value) => utils.phoneValidator(rules, value),
        },
      ],
      legalidno: requiredRule,
      legalidpicfront: requiredRule,
      legalidpicback: requiredRule,
      storepic: requiredRule,
      storeinnerpic: requiredRule,
      creditcode: requiredRule,
      servicephone: requiredRule,
      corpbusname: requiredRule,
      clearmode: requiredRule,
    });

    /**
     * @description: 创建表单
     */
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const images = (index, info) => {
      if (index == 1) {
        state.loadinges1 = true;
      } else if (index == 2) {
        state.loadinges2 = true;
      } else if (index == 3) {
        state.loadinges3 = true;
      } else if (index == 4) {
        state.loadinges4 = true;
      } else if (index == 5) {
        state.loadinges5 = true;
      } else if (index == 7) {
        state.loadinges7 = true;
      } else if (index == 8) {
        state.loadinges8 = true;
      } else if (index == 6) {
        state.loadinges6 = true;
      }

      const isLt2M = info.fileList[0].size / 1024 / 1024 <= 2;
      if (!isLt2M) {
        if (index == 1) {
          state.loadinges1 = false;
        } else if (index == 2) {
          state.loadinges2 = false;
        } else if (index == 3) {
          state.loadinges3 = false;
        } else if (index == 4) {
          state.loadinges4 = false;
        } else if (index == 5) {
          state.loadinges5 = false;
        } else if (index == 7) {
          state.loadinges7 = false;
        } else if (index == 8) {
          state.loadinges8 = false;
        }
      }

      state.fileList = info.fileList.filter((item) => item.url);
      getBase64(info.file.originFileObj, (imageUrl) => {
        request
          .post("/public", "/system/uploadImageFromBase64", {
            image: imageUrl,
            dir: "pass_photo",
          })
          .then((res) => {
            state.fileList = [];
            if (index == 1) {
              modelRef.legalpic = res.fileUrl;
              state.loadinges1 = false;
            } else if (index == 2) {
              modelRef.legalidpicfront = res.fileUrl;
              cardID(res.fileUrl);
              state.loadinges2 = false;
            } else if (index == 3) {
              modelRef.legalidpicback = res.fileUrl;
              cardID(res.fileUrl);
              state.loadinges3 = false;
            } else if (index == 4) {
              modelRef.corpbuspic = res.fileUrl;
              businessLicense(res.fileUrl);
              state.loadinges4 = false;
            } else if (index == 5) {
              modelRef.openaccountpic = res.fileUrl;
              if (modelRef.comproperty == 1) {
                sfz(res.fileUrl);
              }
              state.loadinges5 = false;
            } else if (index == 7) {
              modelRef.storepic = res.fileUrl;
              state.loadinges7 = false;
            } else if (index == 8) {
              modelRef.storeinnerpic = res.fileUrl;
              state.loadinges8 = false;
            } else if (index == 6) {
              modelRef.bizplacepic = res.fileUrl;
              state.loadinges6 = false;
            }
          });
      });
    };

    const moneyzh = (money) => {
      let totalMoneys = 0;
      let newMoney = money
        .replace(/零/g, "")
        .replace(/整/g, "")
        .replace(/(\w*亿)(\w*)/, "$1,$2")
        .replace(/(\w*万)(\w*)/, "$1,$2")
        .replace(/(\w*元)(\w*)/, "$1,$2")
        .replace(/(\w*角)(\w*)/, "$1,$2")
        .split(",");
      for (let mainItem of newMoney) {
        let currMoney = 0;
        let mainArr = mainItem.split("");
        if (mainArr[mainArr.length - 1] == "亿") {
          mainArr.pop();
          currMoney = getInfo(mainArr.join("")) * 100000000;
        } else if (mainArr[mainArr.length - 1] == "万") {
          mainArr.pop();
          currMoney = getInfo(mainArr.join("")) * 10000;
        } else if (mainArr[mainArr.length - 1] == "元") {
          mainArr.pop();
          currMoney = getInfo(mainArr.join(""));
        } else if (mainArr[mainArr.length - 1] == "角") {
          mainArr.pop();
          currMoney = getInfo(mainArr.join("")) * 0.1;
        } else if (mainArr[mainArr.length - 1] == "分") {
          mainArr.pop();
          currMoney = getInfo(mainArr.join("")) * 0.01;
        }
        totalMoneys += currMoney;
      }
      return totalMoneys.toString();
    };

    const getInfo = (item) => {
      let dic = {
        零: 0,
        壹: 1,
        贰: 2,
        叁: 3,
        肆: 4,
        伍: 5,
        陆: 6,
        柒: 7,
        捌: 8,
        玖: 9,
      };
      let itemCount = 0;
      let arr = item
        .replace(/(\w*仟)(\w*)/, "$1,$2")
        .replace(/(\w*佰)(\w*)/, "$1,$2")
        .replace(/(\w*拾)(\w*)/, "$1,$2")
        .split(",");
      for (let subitem of arr) {
        let currValue = 0;
        let subArr = subitem.split("");
        if (subArr[1] == "拾") {
          //处理拾位
          currValue = dic[subArr[0]] * 10;
        } else if (subArr[1] == "佰") {
          //处理佰位
          currValue = dic[subArr[0]] * 100;
        } else if (subArr[1] == "仟") {
          //处理仟位
          currValue = dic[subArr[0]] * 1000;
        } else {
          //处理个位
          currValue = dic[subArr[0]];
        }
        itemCount += currValue;
      }
      return itemCount;
    };

    // 营业执照照片
    const businessLicense = (imageUrl) => {
      request
        .post("/third", "/wxapp/tool/cvOcr/bizlicense", {
          file: imageUrl,
          failNoMsg: true,
        })
        .then((res) => {
          if (res.result) {
            modelRef.address = res.result.address;
            modelRef.creditcode = res.result.reg_num;
            modelRef.corpbusname = res.result.enterprise_name;
            modelRef.legal = res.result.legal_representative;
            if (res.result.valid_period) {
              if (res.result.valid_period.includes("长期")) {
                modelRef.creditcodeexpire_longTerm = true;
              } else {
                modelRef.creditcodeexpire_longTerm = false;
                let n = res.result.valid_period;
                let iyear = n.slice(0, 4);
                let imoon = n.slice(5, 7);
                let iday = n.slice(8, 10);
                let zyear = n.slice(12, 16);
                let zmoon = n.slice(17, 19);
                let zday = n.slice(20, 22);
                modelRef.creditcodeexpire_start =
                  iyear + "-" + imoon + "-" + iday;
                modelRef.creditcodeexpire = zyear + "-" + zmoon + "-" + zday;
                state.creditcodeexpire_time = [
                  dayjs(modelRef.creditcodeexpire_start, "YYYY-MM-DD"),
                  dayjs(modelRef.creditcodeexpire, "YYYY-MM-DD"),
                ];
              }
            }
            if (
              res.result.registered_capital &&
              !res.result.registered_capital.includes("0")
            ) {
              let i = parseFloat(moneyzh(res.result.registered_capital));
              if (i >= 1000000) {
                modelRef.registerfund = 5;
              } else if (500000 <= i < 1000000) {
                modelRef.registerfund = 4;
              } else if (200000 <= i < 500000) {
                modelRef.registerfund = 3;
              } else if (100000 <= i < 200000) {
                modelRef.registerfund = 2;
              } else if (i < 100000) {
                modelRef.registerfund = 1;
              }
            }
          }
        });
    };

    const cardID = (imageUrl) => {
      request
        .post("/third", "/wxapp/tool/cvOcr/idCard", {
          file: imageUrl,
          failNoMsg: true,
        })
        .then((res) => {
          if (res.idCard) {
            if (res.idCard.type == "Front") {
              modelRef.legal = res.idCard.name;
              modelRef.legalidno = res.idCard.id;
            } else {
              let n = res.idCard.valid_date;
              let iyear = n.slice(0, 4);
              let imoon = n.slice(4, 6);
              let iday = n.slice(6, 8);
              let zyear = n.slice(9, 13);
              let zmoon = n.slice(13, 15);
              let zday = n.slice(15, 17);
              modelRef.legalidexpire_start = iyear + "-" + imoon + "-" + iday;
              modelRef.legalidexpire = zyear + "-" + zmoon + "-" + zday;
              state.legalidexpire_time = [
                dayjs(modelRef.legalidexpire_start, "YYYY-MM-DD"),
                dayjs(modelRef.legalidexpire, "YYYY-MM-DD"),
              ];
            }
          }
        });
    };

    const sfz = (imageUrl) => {
      request
        .post("/third", "/wxapp/tool/cvOcr/bankcard", {
          file: imageUrl,
          failNoMsg: true,
        })
        .then((res) => {
          modelRef.acctid = res.result.number;
        });
    };

    const handleChanges1 = (info) => {
      images(1, info);
    };
    const handleChanges2 = (info) => {
      images(2, info);
    };
    const handleChanges3 = (info) => {
      images(3, info);
    };
    const handleChanges4 = (info) => {
      images(4, info);
    };
    const handleChanges5 = (info) => {
      images(5, info);
    };
    const handleChanges6 = (info) => {
      images(6, info);
    };
    const handleChanges7 = (info) => {
      images(7, info);
    };
    const handleChanges8 = (info) => {
      images(8, info);
    };

    const deletes = (index) => {
      if (index == 1) {
        modelRef.legalpic = "";
      } else if (index == 2) {
        modelRef.legalidpicfront = "";
      } else if (index == 3) {
        modelRef.legalidpicback = "";
      } else if (index == 4) {
        modelRef.corpbuspic = "";
      } else if (index == 5) {
        modelRef.openaccountpic = "";
      } else if (index == 6) {
        modelRef.bizplacepic = "";
      } else if (index == 7) {
        modelRef.storepic = "";
      } else if (index == 8) {
        modelRef.storeinnerpic = "";
      }
    };

    const beforeUpload = (file) => {
      const isLt2M = file.size / 1024 / 1024 <= 2;
      if (!isLt2M) {
        message.error("上传图片大小不超过 2MB ");
      }
      return isLt2M;
    };

    const getBase64 = (img, callback) => {
      if (img) {
        const reader = new FileReader();
        reader.addEventListener("load", () => callback(reader.result));
        reader.readAsDataURL(img);
      }
    };

    const closeModal = () => {
      emit("close");
    };

    const tabetype = (index) => {
      state.tabetypes = index;
      if (index == 2) {
        if (modelRef.comproperty == 1) {
          rulesRef.corpbuspic = [{ required: false, message: "必填项" }];
          rulesRef.creditcode = [{ required: false, message: "必填项" }];
          rulesRef.corpbusname = [{ required: false, message: "必填项" }];
          rulesRef.stafftotal = [{ required: false, message: "必填项" }];
          rulesRef.registerfund = [{ required: false, message: "必填项" }];
          rulesRef.legalpic = [{ required: true, message: "必填项" }];
          rulesRef.bizplacepic = [{ required: true, message: "必填项" }];
        } else if (modelRef.comproperty == 2) {
          rulesRef.corpbuspic = [{ required: true, message: "必填项" }];
          rulesRef.creditcode = [{ required: true, message: "必填项" }];
          rulesRef.corpbusname = [{ required: true, message: "必填项" }];
          rulesRef.stafftotal = [{ required: true, message: "必填项" }];
          rulesRef.registerfund = [{ required: true, message: "必填项" }];
          rulesRef.legalpic = [{ required: false, message: "必填项" }];
          rulesRef.bizplacepic = [{ required: false, message: "必填项" }];
        } else if (modelRef.comproperty == 3) {
          rulesRef.corpbuspic = [{ required: true, message: "必填项" }];
          rulesRef.creditcode = [{ required: true, message: "必填项" }];
          rulesRef.corpbusname = [{ required: true, message: "必填项" }];
          rulesRef.stafftotal = [{ required: true, message: "必填项" }];
          rulesRef.registerfund = [{ required: true, message: "必填项" }];
          rulesRef.legalpic = [{ required: false, message: "必填项" }];
          rulesRef.bizplacepic = [{ required: false, message: "必填项" }];
        }
      }

      if (index == 3) {
        rulesRef.openaccountpic = [{ required: true, message: "必填项" }];
        rulesRef.acctid = [{ required: true, message: "必填项" }];
        rulesRef.bankcode = [{ required: true, message: "必填项" }];
        rulesRef.bank_areaes = [{ required: true, message: "必填项" }];
        rulesRef.cnapsno = [{ required: true, message: "必填项" }];
        rulesRef.prephone = [
          {
            required: true,
            validator: (rules, value) => utils.phoneValidator(rules, value),
          },
        ];
      } else {
        rulesRef.openaccountpic = [{ required: false, message: "必填项" }];
        rulesRef.acctid = [{ required: false, message: "必填项" }];
        rulesRef.bankcode = [{ required: false, message: "必填项" }];
        rulesRef.bank_areaes = [{ required: false, message: "必填项" }];
        rulesRef.cnapsno = [{ required: false, message: "必填项" }];
        rulesRef.prephone = [{ required: false, message: "必填项" }];
      }
    };

    const butright = (index) => {
      modelRef.comproperty = index;
      if (modelRef.comproperty == 1) {
        modelRef.accttype = 0;
      } else {
        modelRef.accttype = 1;
      }
    };

    const handlecancel = () => {
      state.pictureVisible = false;
    };

    const ViewSampleImage = (index, url) => {
      if (index == 1) {
        state.sampleImage =
          "https://cos.kuaijingai.com/pay_service/apply_mch/cert_photo_h.png"; //手持身份证
      } else if (index == 2) {
        state.sampleImage =
          "https://cos.kuaijingai.com/pay_service/apply_mch/cert_photo_a.png"; //正面身份证
      } else if (index == 3) {
        state.sampleImage =
          "https://cos.kuaijingai.com/pay_service/apply_mch/cert_photo_b.png"; //反面身份证
      } else if (index == 4) {
        state.sampleImage =
          "https://cos.kuaijingai.com/pay_service/apply_mch/license_photo.png"; //营业执照
      } else if (index == 5) {
        state.sampleImage =
          "https://cos.kuaijingai.com/pay_service/apply_mch/kaihu_xuke.png"; //许可证
      } else if (index == 6) {
        state.sampleImage =
          "https://saas.dding.net/static/img/alipay/bank_card_photo.png"; //银行卡
      } else {
        state.sampleImage = url;
      }
      state.pictureVisible = true;
    };

    // 动态加载省市区信息
    const loadAreaDatas = (selectedOptions) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      utils
        .getDistrictsOptions(targetOption.level + 1, { id: targetOption.value })
        .then((res) => {
          if (res.length) {
            targetOption.children = res;
          } else {
            targetOption.isLeaf = true;
          }
          targetOption.loading = false;
        });
    };

    // 银行地址所属地区
    const openAccount = ref([]);

    // 监听省市区选择
    const areaSelectChanges = (value, selectedOptions) => {
      let areaTxtArr = selectedOptions.map((item) => item.label);
      if (areaTxtArr.length == 2) {
        modelRef.bank_province = areaTxtArr[0];
        modelRef.bank_city = areaTxtArr[1];
        if (modelRef.bankcode) {
          BranchListchange();
        }
        modelRef.cnapsno = undefined;
      }
    };

    const filterOption1 = (string, any) => {
      return any.label.toLowerCase().indexOf(string.toLowerCase()) >= 0;
    };
    const filterOption = (string, any) => {
      return any.label.toLowerCase().indexOf(string.toLowerCase()) >= 0;
    };

    const businesschange = (string, dateStrings) => {
      modelRef.creditcodeexpire_start = dateStrings[0];
      modelRef.creditcodeexpire = dateStrings[1];
    };

    const businesschanges = (string, dateStrings) => {
      modelRef.legalidexpire_start = dateStrings[0];
      modelRef.legalidexpire = dateStrings[1];
    };

    const longTermes = (checkedValue) => {
      if (checkedValue.target.checked) {
        state.creditcodeexpire_time = [];
        modelRef.creditcodeexpire_start = "";
        modelRef.creditcodeexpire = "";
        modelRef.creditcodeexpire_long = 1;
      } else {
        modelRef.creditcodeexpire_long = 0;
      }
    };

    const longTermes1 = (checkedValue) => {
      if (checkedValue.target.checked) {
        state.legalidexpire_time = [];
        modelRef.legalidexpire_start = "";
        modelRef.legalidexpire = "";
        modelRef.legalidexpire_long = 1;
      } else {
        modelRef.legalidexpire_long = 0;
      }
    };

    const disabledDate1 = (current) => {
      if (modelRef.creditcodeexpire_longTerm) {
        return current && current < dayjs(modelRef.creditcodeexpire_longTerm);
      }
    };

    const nextSteps = () => {
      validate().then(() => {
        if (modelRef.comproperty != 1) {
          if (
            modelRef.creditcode.length != 15 &&
            modelRef.creditcode.length != 18
          ) {
            message.warn("工商注册号应为15位或18位！");
            return;
          }
          if (!modelRef.creditcodeexpire_longTerm) {
            if (!modelRef.creditcodeexpire_start) {
              message.warn("请选择营业执照有效期开始时间！");
              return;
            }
            if (!modelRef.creditcodeexpire) {
              message.warn("请选择营业执照有效期结束时间！");
              return;
            }
          }
        }
        if (modelRef.shortname.length >= 10) {
          message.warn("商户简称应在10个字符以内！");
          return;
        }
        if (modelRef.legal.length >= 56) {
          message.warn("姓名应在56个字符以内！");
          return;
        }
        if (modelRef.legalidno.length != 18) {
          message.warn("请填写18位身份证号！");
          return;
        }
        if (!modelRef.longTerm) {
          if (!modelRef.legalidexpire_start) {
            message.warn("请选择身份证有效期开始时间！");
            return;
          }
          if (!modelRef.legalidexpire) {
            message.warn("请选择身份证有效期结束时间！");
            return;
          }
        }
        if (!modelRef.areaes) {
          message.warn("请选择商户地址！");
          return;
        }
        if (!modelRef.address) {
          message.warn("请填写详细地址！");
          return;
        }
        tabetype(3);
      });
    };

    const SubmitApplication = () => {
      validate().then(() => {
        const params = { ...modelRef };
        request.post("/pay", "/incoming/info", params).then((res) => {
          message.success(res.msg || "保存成功！");
          closeModal();
        });
      });
    };

    const changesBankList = (value, option) => {
      if (modelRef.bankcode && modelRef.bank_province && modelRef.bank_city) {
        BranchListchange();
      }
      modelRef.cnapsno = undefined;
    };

    const BankListchange = () => {
      request.get("/pay", "/org/bank").then((res) => {
        state.BankList = res.list.map((item) => ({
          value: item.code,
          label: item.name,
        }));
      });
    };

    const Industrychange = () => {
      request.get("/pay", "/org/industry").then((res) => {
        state.IndustryList = res.list.map((item) => ({
          value: parseFloat(item.code),
          label: item.name,
        }));
      });
    };

    const MerchantAddress = () => {
      request.get("/pay", "/org/area").then((res) => {
        state.areaOptions = res.list.map((item) => ({
          value: item.code,
          label: item.name,
        }));
      });
    };

    const BranchListchange = () => {
      let params = {};
      if (modelRef.bankcode) {
        params.bank_code = modelRef.bankcode;
      }
      if (modelRef.bank_province) {
        params.province = modelRef.bank_province;
      }
      if (modelRef.bank_city) {
        params.areaes = modelRef.bank_city;
      }

      request.get("/pay", "/org/sub_bank", params).then((res) => {
        state.options = res.list.map((item) => ({
          value: item.sub_bank_code,
          label: item.sub_bank_name,
        }));
      });
    };

    const inputphone = () => {
      if (modelRef.prephone.length == 11) {
        modelRef.legalphone = modelRef.prephone;
      }
    };

    const init = () => {
      if (!props.ApprovedOrNot) {
        utils.getDistrictsOptions(1).then((res) => {
          // areaOptions.value = res;
          openAccount.value = res;
        });
        Industrychange();
        MerchantAddress();
        BankListchange();
      }
    };

    init();

    return {
      modelRef,
      resetFields,
      validateInfos,
      openAccount,
      moneyzh,
      ...toRefs(state),
      closeModal,
      tabetype,
      butright,
      getBase64,
      handlecancel,
      ViewSampleImage,
      loadAreaDatas,
      areaSelectChanges,
      nextSteps,
      filterOption,
      SubmitApplication,
      businesschange,
      disabledDate1,
      longTermes,
      longTermes1,
      businesschanges,
      handleChanges1,
      handleChanges2,
      handleChanges3,
      handleChanges4,
      handleChanges5,
      handleChanges6,
      handleChanges7,
      handleChanges8,
      images,
      deletes,
      filterOption1,
      BankListchange,
      BranchListchange,
      changesBankList,
      Industrychange,
      beforeUpload,
      MerchantAddress,
      businessLicense,
      cardID,
      sfz,
      inputphone,
      getInfo,
    };
  },
});
</script>

<style lang="less" scoped >
.screenes {
  height: 54px;
  line-height: 54px;
  display: flex;
  .IDCardType {
    width: 33.3%;
    background: #efeff1;
    color: #5e5e5e;
    border-right: 1px solid #d9d9d9;
    text-align: center;
  }
  .BasicInformation {
    width: 33.3%;
    background: #efeff1;
    color: #5e5e5e;
    text-align: center;
  }
  .AccountNumber {
    width: 33.4%;
    background: #efeff1;
    color: #5e5e5e;
    border-left: 1px solid #d0d0d1;
    text-align: center;
  }
  .Selected {
    background: #05bac5 !important;
    color: #fff !important;
  }
}

.ContentText {
  padding-left: 10px;
  padding-right: 10px;
}

.contentestxt {
  text-align: center;
  font-size: 22px;
  padding-top: 30px;
  margin-bottom: 10px;
}

.contentes {
  padding-top: 20px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: rgb(73, 80, 96);
  .text {
    p {
      margin-bottom: 10px;
    }
  }
}

.accountTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 20px;
  height: 82px;
  .title {
    font-size: 22px;
    padding-bottom: 20px;
    margin: 0 !important;
    box-sizing: border-box;
    padding-top: 8px;
  }
}

.butthree {
  display: flex;

  span {
    display: inline-block;
    height: 38px;
    line-height: 36px;
    padding: 0 15px;
    color: #787b81;
    font-size: 12px;
    cursor: pointer;
  }

  .naturalPerson {
    border-radius: 5px 0px 0px 5px;
    border: 1px solid #dfdfe2;
  }

  .individuality {
    border-top: 1px solid #dfdfe2;
    border-bottom: 1px solid #dfdfe2;
    border-right: 1px solid rgba(223, 223, 226, 0);
    border-left: 1px solid rgba(223, 223, 226, 0);
  }

  .enterprise {
    border-radius: 0px 5px 5px 0px;
    border: 1px solid #dfdfe2;
  }

  .clqhuan {
    border: 1px solid #5bc3ca;
    color: #2fb0b8 !important;
    box-shadow: 0 0 6px rgba(130, 213, 218, 0.5);
  }
}

.footer {
  padding: 20px 0;
  border-top: none;
  text-align: center;

  span {
    font-size: 12px;
    padding: 8px 15px;
    display: inline-block;
    border: 1px solid #05b9c5;
    border-radius: 5px;
  }
}

.Back {
  border: 1px solid #05bac5 !important;
  background: #fff;
  color: #05bac5;
  cursor: pointer;
}
.nextStep {
  background: #05bac5;
  color: #fff;
  cursor: pointer;
}
.prompt {
  color: #bdbec2;
}
.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.StoreInformation {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}
.Pictures {
  width: 100%;
  padding-top: 10px;
  .pictureInformation {
    width: 100%;
    display: flex;
    height: 32px;
    line-height: 32px;
  }
}
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 150px 50px;
  margin: 20px 0;
  font-size: 25px;
  color: #52c41a;
}
</style>
